<template>
  <div class="bg-white">
    <div class="w-fit flex rounded-1 bg-#FFF5EB p-x-1 p-y-.5 text-#FF8D36" :class="{ 'bg-#EBEBEB! text-#C8C8C8!': data.status === 1 }">
      {{ data.status === 1 ? '已核销' : '待核销' }}
    </div>
    <div class="relative w-full flex gap-2 p-x-5 p-b-6 p-t-1">
      <img :src="fileBaseUrl + data.pic" class="h-20 rounded-2" alt="">
      <div class="flex flex-1 flex-col justify-between">
        <div class="m-t-1">
          <p class="text-#333333 font-600">
            {{ data.goodsName }}
          </p>
          <p v-if="data.status === 1" class="text-3 text-#999">
            核销时间：{{ data.updateTime }}
          </p>
          <p v-else class="text-3 text-#999">
            兑换时间：{{ data.createTime }}
          </p>
        </div>
        <p class="flex items-center gap-1 text-#F7580A">
          <span class="text-3 font-600">{{ data.score }}</span>
          <span class="text-2.5">积分</span>
        </p>
        <div v-if="data.status !== 1" class="absolute bottom-5 right-3" @click="handleGotoWriteOff">
          <Btn class="p-x-4 p-y-1.5!">
            去核销
          </Btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import type { IOrderData } from '@/api/home/types'
import Btn from '@/components/Btn.vue'

interface Props {
  data: IOrderData
}

const props = withDefaults(defineProps<Props>(), {
  data: () => ({} as IOrderData),
})

const router = useRouter()
const fileBaseUrl = import.meta.env.VITE_GLOB_IMG_URL
function handleGotoWriteOff() {
  router.replace({
    path: '/confirm-write-off',
    query: {
      code: props.data.code,
    },
  })
}
</script>

<style lang='less' scoped>
</style>
